<template>
  <div class="m-chat">
    <div class="m-title">
      科技企业包括国家高新技术企业，江苏省科技型中小企业，江苏省民营科技企业，属于雏鹰计划企业，以及拥有四
      级领军人才的企业等，共5582家。
    </div>
    <div class="m-serch">
    选择日期：
      <el-date-picker
        v-model="value1"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
      <el-button type="primary">查询</el-button>

    </div>
    <div>
      <el-row  type="flex"  justify="center" class="m-margin">
        <el-col :span="22"> <el-card ><div class="m-height" id="Chart1"></div></el-card></el-col>
      </el-row>
      <el-row type="flex"  justify="center" >
        <el-col :span="22"> <el-card ><div class="m-height" id="Chart2"></div></el-card></el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  // 引入 ECharts 主模块
  let echarts = require('echarts/lib/echarts');
  // 引入柱状图
  require('echarts/lib/chart/bar');
  // 引入提示框和标题组件
  require('echarts/lib/component/tooltip');
  require('echarts/lib/component/title');

  export default {
    name: "FinancingNeeds",
    data(){
      return{
        value1:'',
        chart1:{
          title: { text: '融资需求金额（按企业资质分布）' ,
            left: 'center'},
          tooltip: {},
          xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
          },
          yAxis: {},
          series: [{
            name: '销量',
            type: 'bar',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    {offset: 0, color: '#83bff6'},
                    {offset: 0.5, color: '#188df0'},
                    {offset: 1, color: '#188df0'}
                  ]
                )
              }
            },
            data: [5, 20, 36, 10, 10, 20],
            label: {
              normal: {
                show: true,
                position: 'top'
              }
            },

          }]
        },
        chart2:{
          title: { text: '融资需求金额（按企业资质分布）' ,
            left: 'center'},
          tooltip: {},
          xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
          },
          yAxis: {},
          series: [{
            name: '销量',
            type: 'bar',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    {offset: 0, color: '#83bff6'},
                    {offset: 0.5, color: '#188df0'},
                    {offset: 1, color: '#188df0'}
                  ]
                )
              }
            },
            data: [5, 20, 36, 10, 10, 20],
            label: {
              normal: {
                show: true,
                position: 'top'
              }
            },

          }]
        },
      }
    },
    mounted(){
      this.initChart();
    },
    methods:{
      initChart(){
        // 基于准备好的dom，初始化echarts实例
        let myChart1 = echarts.init(document.getElementById('Chart1'))
        let myChart2 = echarts.init(document.getElementById('Chart2'))

        // 绘制图表
        myChart1.setOption(this.chart1);
        myChart2.setOption(this.chart2);

      },
      handleClick(){

      }
    }
  }
</script>

<style scoped lang="less">

  .m-height{
    height: 300px;
  }
  .m-title{
    margin-bottom: 30px;

  }
  .m-margin{
    margin-bottom: 25px;
  }
  .m-serch{
    text-align: center;
    margin-bottom: 30px;
  }

</style>
